<template>
    <div class="header">
    	<div class="content-wrapper">
    		<div class="avarta">
    			<img width="64" height="64" :src="seller.avatar">
    		</div>
    		<div class="content">
    			<div class="title">
    				<span class="brand"></span>
    				<span class="name">{{seller.name}}</span>
    			</div>
    			<div class="description">
    				{{seller.description}}/{{seller.deliveryTime}}分钟送达
    			</div>
    			<div v-if="seller.supports" class="supports">
    				<span class="icon" :class="classMap[seller.supports[0].type]"></span>
    				<span class="text">{{seller.supports[0].description}}</span>
    			</div>
    		</div>
    		<div class="support-count" v-if="seller.supports" @click="showDetail">
    			<span class="count">{{seller.supports.length}}个</span>
    			<i class="icon-thumb_up"></i>
    		</div>
    	</div>
    	<div class="bulletin-wrapper"  @click="showDetail">
    		<span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
    		<i class="icon-thumb_up"></i>
    	</div>
    	<img class="background" width="100%" height="100%" :src="seller.avatar">
    	<div v-show="detailShow" class="detail" transition="fade">
            <div class="detail-wrapper clearfix">
                <div class="detail-main">
                    <h1 class="name">{{seller.name}}</h1>
                    <star class="star-wrapper" :score="seller.score" :size="48"></star>
                    <div class="title">
                        <div class="line"></div>
                        <div class="text">优惠信息</div>
                        <div class="line"></div>
                    </div>
                    <ul class="supports" v-if="seller.supports">
                        <li class="support-item" v-for="(item,index) in seller.supports">
                            <span class="icon" :class="classMap[seller.supports[index].type]"></span>
                            <span class="text">{{seller.supports[index].description}}</span>
                        </li>
                    </ul>
                    <div class="title">
                        <div class="line"></div>
                        <div class="text">商家公告</div>
                        <div class="line"></div>
                    </div>
                    <div class="bulletin">
                        <p class="content">{{seller.bulletin}}</p>
                    </div>
                </div>
            </div>
            <div class="detail-close">
                <i class="icon-remove_circle_outline" @click="hideDetail"></i>
            </div>
    	</div>
    </div>
</template>

<script type="text/ecmascript-6">
    import star from '../star/star.vue';
    export default {
    	props: {
    		seller: {
    			type: Object
    		}
    	},
    	data() {
    		return {
    			detailShow: false
    		};
    	},
    	methods: {
    		showDetail() {
    			this.detailShow = true;
    		},
            hideDetail() {
                this.detailShow = false;
            }
    	},
    	created() {
    		this.classMap = ['decrease', 'discount', 'invoice', 'special', 'guarantee'];
    	},
        components: {
            star: star
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../commen/stylus/mixin.styl'
.header
    color:#fff
    background: rgba(7,17,27,0.5)
    overflow: hidden
    position: relative
    .content-wrapper
    	padding:24px 13px 18px 24px
    	font-size:0
    	position: relative
    	.avarta
    		display: inline-block
    		vertical-align: top
    		img
    			border-radius: 2px
    	.content
    		display: inline-block
    		font-size: 14px
    		margin-left: 16px
    		.title
    			margin: 2px 0 8px 0
    			.brand
    				display: inline-block
    				width: 30px
    				height: 18px
    				vertical-align: top
    				bg-image('brand')
    				background-size: 30px 18px
    				background-repeat: no-repeat
    			.name
    				margin-left: 6px
    				font-size: 16px
    				line-height: 18px
    				font-weight: bold
    		.description
    			margin-bottom: 10px
    			line-height: 12px
    			font-size: 12px
    		.supports
    			.icon
    				display: inline-block
    				width: 12px
    				height: 12px
    				margin-right: 4px
    				background-size: 12px 12px
    				background-repeat: no-repeat
    				&.decrease
    					bg-image('decrease_1')
    				&.discount
    					bg-image('discount_1')
    				&.invoice
    					bg-image('invoice_1')
    				&.guarantee
    					bg-image('guarantee_1')
    				&.special
    					bg-image('special_1')
    	.support-count
    		position: absolute
    		right: 12px
    		bottom: 12px
    		padding: 0 8px
    		height: 24px
    		line-height: 24px
    		border-radius: 14px
    		background: rgba(0,0,0,0.2)
    		text-align: center
    		.count
    			font-size: 10px
    		.icon-thumb_up
    			line-height: 24px
    			margin-left: 2px
    			font-size: 10px
    .bulletin-wrapper
    	height: 28px
    	line-height: 28px
    	padding: 0 22px 0 12px
    	white-space: nowrap
    	overflow: hidden
    	text-overflow: ellipsis
    	position: relative background: rgba(7, 17, 27, 0.2)
    	.bulletin-title
    		vertical-align: top
    		margin-top: 8px
    		display: inline-block
    		width: 22px
    		height: 12px
    		bg-image('bulletin')
    		background-size: 22px 12px
    		background-repeat: no-repeat
    	.bulletin-text
    		vertical-align:top
    		font-size: 10px 
    		font-weight: 200
    		margin: 0 4px
    	.icon-thumb_up
    		font-size: 10px
    		position: absolute
    		right: 12px
    		top: 8px
    .background
    	position:absolute
    	top: 0
    	left: 0
    	width: 100%
    	height: 100%
    	z-index :-1
    	filter: blur(10px)
    .detail
        position:fixed
        left:0
        top: 0
        width: 100%
        height: 100%
        overflow: auto
        background: rgba(7,17,27,0.8)
        z-index: 100
        .detail-wrapper
            min-height: 100%
            width: 100%
            .detail-main
                margin-top: 64px
                padding-bottom: 64px
                .name
                    font-size: 16px
                    line-height: 16px
                    text-align: center
                    font-weight: 700
                .star-wrapper
                    margin-top: 18px
                    padding: 2px 0
                    text-align: center
                .title
                    width: 80%
                    margin:  30px auto 24px auto
                    display: flex
                    .line
                        flex: 1
                        position: relative
                        top: -6px
                        border-bottom: 1px solid rgba(255,255,255,0.2)
                    .text
                        padding:0 12px
                        font-size: 14px
                        font-weight: 700
                .supports
                    width: 80%
                    margin: 0 auto
                    .support-item
                    padding: 0 12px
                    margin-bottom: 12px
                    font-size: 0
                    &:last-child
                        margin-bottom: 0
                    .icon
                        display: inline-block
                        width: 16px
                        height: 16px
                        vertical-align: top
                        margin-right: 6px
                        background-size: 16px 16px
                        background-repeat: no-repeat
                        &.decrease
                            bg-image('decrease_2')
                        &.discount
                            bg-image('discount_2')
                        &.invoice
                            bg-image('invoice_2')
                        &.guarantee
                            bg-image('guarantee_2')
                        &.special
                            bg-image('special_2')
                    .text
                        line-height: 16px
                        font-size: 12px
                .bulletin
                    width: 80%
                    margin: 0 auto
                    .content
                        padding: 0 12px
                        line-height: 24px
                        font-size: 12px
        .detail-close
            position: relative
            width: 32px
            height: 32px
            margin: -64px auto 0 auto
            clear: both
            font-size: 32px
</style>
